
<template>
  <div>
    <div id='container' class="img">
      <el-image
        style="width: 700px; height: 700px; "
        :src="url"
        fill>
        <div slot="error" >

        </div>
      </el-image>
      <div style="font-size: 30px">{{result}}</div>
    </div>



  </div>
</template>

<script>
import {init,isInstall} from "../../api/faceApi";
import {WebVideoCtrl} from "../../../static/HCNetSDK/webVideoCtrl.js"
import {getPhoto,register} from "../../api/faceApi";

export default {
  name: "face",
  data(){
    return {
      fileList:[],
        url: "",
      baseUrl:"data:image/png;base64,",
        webSocket: "ws://localhost:8089/socket/local",
        result: "",
        file: undefined,
      form:{},
      params: new FormData(),
    }
  },
  methods:{
      login(){
        // getPhoto().then(value => {
        //   console.log(value.data)
        //   let url = window.URL.createObjectURL(value.data);
        //   this.url = url;
        // })
      },
    initWebsocket(){
          let that = this;
          let ws = new WebSocket(this.webSocket);
          ws.onopen = val =>{
            console.log("连接成功")
          }
          ws.onmessage = function (val){
            let temp = JSON.parse(val.data);
            that.url = that.baseUrl + temp.img;
            that.result = temp.msg;
            console.log(temp);
            // console.log(that)
          }
    },
    getFile(file){
      this.file = file;
      console.log(this.file)
    },
    handlRegister(){
      this.params.append('id',this.form.idCard) ;
      this.params.append('file',this.file.raw)
      register(this.params).then(value => {
        console.log(value)
        if(value.data.code == 200){
          this.$message({
            message: '注册成功',
            type: 'success'
          });
        }
        else {
          this.$message.error('注册失败,请重新选择照片');
        }
        this.params = new FormData();
      })
    },
  },

  mounted() {
      this.initWebsocket();
  }
}
</script>

<style scoped>
.img{

  overflow: hidden;
}
.upload{
  padding-left: 200px;
  float: left;
  overflow: hidden;
}
</style>
